<template>
	<div class="newPage">
		<div class="header_wrap" :style="`padding-top: ${statusBarHeight}px`">
			<div class="goback" @click="goBack">
				{{ TUITranslateService.t("取消") }}
			</div>
			{{ info }}
			<div class="add_people" @click="handleMenu(userID)">
				{{ TUITranslateService.t("确定") }}
			</div>
		</div>
		<scroll-view scroll-y="true" class="scroll-Y">
			<u-radio-group class="group_wrap" v-model="isGroup" :wrap="true">
				<u-radio class="list_item" v-for="(item, index) in contactListMap" :key="index" :name="item.groupID"
					:disabled="item.disabled">
					<Avatar class="list_img" useSkeletonAnimation :url="item.avatar" size="88rpx" />
					<div class="list_name">
						{{ item.name }}
					</div>
				</u-radio>
			</u-radio-group>
		</scroll-view>
	</div>
</template>
<script lang="ts">
	// import { addFriend } from "../utils";
	export default {
		data() {
			return {
				lang: uni.getStorageSync('lang'),
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				info: "；邀请群聊",
				userID: "",
			}
		},
		onLoad(val : any) {
			this.userID = val.userID;
		},
		onShow() {
			TUITranslateService.changeLanguage(this.lang);
			if (this.lang == 'zh') {
				this.info = "邀请群聊";
			} else {
				this.info = "Пригласить в чат";
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<script lang="ts" setup>
	import { ref, onMounted, onUnmounted } from "../../../adapter-vue";
	import {
		TUITranslateService,
		TUIStore,
		StoreName,
		IGroupModel,
		TUIGroupService,
	} from "@tencentcloud/chat-uikit-engine";
	import Avatar from "../../common/Avatar/index.vue";

	const currentContactInfo = ref<any>({});
	const isGroup = ref<string | null>("");

	const contactListMap = ref<Array<any>>([]);

	function updateCurrentContactInfoFromList(list : Array<any>, type : string) {
		if (
			!currentContactInfo?.value?.userID &&
			!currentContactInfo?.value?.groupID
		) {
			return;
		} else if (
			currentContactInfo?.value?.groupID
		) {
			currentContactInfo.value = list?.find(
				(item : any) =>
					item?.groupID && item?.groupID === currentContactInfo?.value?.groupID
			);
			TUIStore.update(StoreName.CUSTOM, "currentContactInfo", currentContactInfo.value);
		}
	}


	function onGroupListUpdated(groupList : Array<IGroupModel>) {
		contactListMap.value = groupList.map(item => {
			let obj = {
				avatar: item.avatar,
				groupID: item.groupID,
				name: item.name,
				ownerID: item.ownerID,
				disabled: false
			}
			return obj;
		})
		updateCurrentContactInfoFromList(contactListMap.value, "groupList");
	}


	onMounted(() => {
		TUIStore.watch(StoreName.GRP, {
			groupList: onGroupListUpdated,
		});
	});

	onUnmounted(() => {
		TUIStore.unwatch(StoreName.GRP, {
			groupList: onGroupListUpdated,
		});
	});

	const handleMenu = async (userId : string) => {
		if (!isGroup.value) return;
		let groupID = "";
		contactListMap.value.some((item : any) => {
			if (item.groupID === isGroup.value) {
				groupID = item.groupID;
				return true;
			}
			return false;
		})

		const options : any = {
			groupID: groupID,
			userIDList: [userId],
		};
		try {
			await TUIGroupService.addGroupMember(options);
			uni.showToast({
				title: uni.getStorageSync('lang') === "zh" ? "邀请成功" : "Приглашение удалось",
				icon: "none",
			});
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			}, 1000)
		} catch (e) {
			//TODO handle the exception
			// "该群类型不支持邀请"
			uni.showToast({
				title: uni.getStorageSync('lang') === "zh" ? "该群类型不支持邀请" : "Этот тип группы не поддерживает приглашения",
				icon: "none",
			});
		}

	}
</script>

<style lang="scss" scoped>
	.newPage {
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		padding-top: calc(constant(safe-area-inset-top));
		padding-top: calc(env(safe-area-inset-top));
		height: 100%;
		/* #ifdef APP-PLUS */
		height: 100vh;
		/* #endif */
		background: #F7F8FA;
	}

	.header_wrap {
		flex: none;
		height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		line-height: 60rpx;
		color: #1D1D1D;
		font-weight: 500;
		letter-spacing: 3rpx;
		margin-bottom: 30rpx;
		position: relative;
		background-color: #F7F8FA;

		.add_people {
			position: absolute;
			z-index: 2;
			display: inline-flex;
			bottom: 0;
			right: 0;
			font-size: 28rpx;
			line-height: 88rpx;
			padding: 0 30rpx;
			color: #1D1D1D;
		}

		.goback {
			position: absolute;
			z-index: 2;
			display: inline-flex;
			bottom: 0;
			left: 0;
			font-size: 28rpx;
			line-height: 88rpx;
			padding: 0 30rpx;
			color: #999999;
		}
	}



	.scroll-Y {
		width: 100%;
		flex: 1;
		overflow: hidden;
		padding: 60rpx 30rpx 10rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 48rpx 48rpx 0 0;

		.group_wrap {
			width: 100%;
		}

		.list_item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			::v-deep .u-radio__label {
				flex: 1;
				display: inline-flex;
				align-items: center;
				padding-left: 20rpx;
				overflow: hidden;
			}

			.list_img {
				flex: none;
				margin-right: 20rpx;
			}

			.list_name {
				font-size: 32rpx;
				color: #1D1D1D;
				flex: 1;
				box-sizing: border-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				white-space: nowrap;
			}
		}
	}
</style>